<template>
	<view class="uni-tab-bar">
		<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x>
			<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==tab.id ? 'active' : '']" :id="tab.id"
			 :data-current="tab.id" @click="tapTab(tab.id)">{{tab.title}}</view>
		</scroll-view>
		<scroll-view class="list" scroll-y @scrolltolower="loadMore(tabIndex)">
			<view class="joe-game-box">
				<view v-for="(item,index) in gameList" :key="index" class="joe-game-item">
					<image mode="widthFix" :src="item.logo"></image>
					<view class="joe-game-item-name">
						<view>{{item.game_name}}</view>
						<view class="text">{{item.gift_describe}}</view>
					</view>
					<view class="joe-game-item-but">
						<view>剩余:{{item.use_number}}</view>
						<button @tap="bindGetGift(item)">领取</button>
						<!-- <button v-if="item.game_type==0" @tap="bindGamePaly(item)">开玩</button>
						<button v-else @tap="bindDownGame(item)" style="background-color: #09BB07;">下载</button> -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import joeGameList from "@/components/joe-game/game-list.vue"
	import {
		api_group_list,
		api_gift_list,
		api_game_paly,
		api_get_gift,
		api_down_game
	} from '@/api/index.js';
	import service from "@../../service"
	export default {
		components: {
			joeGameList
		},
		data() {
			return {
				//游戏分类
				tabBars: [],
				tabIndex: 0,
				gameList: [],
				game: [],
				page: 1,
				rows: 10,
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		onLoad: function(option) {

			//获取分组
			api_group_list().then(res => {
				this.tabBars = res.data.data
				//设置默认选中第一个分组
				this.tabIndex = this.tabBars[0].id
				api_gift_list(this.tabIndex, this.page, this.rows).then(res => {
					//this.gameList = res.data.data.list
					let list = res.data.data.list
					list.forEach((item, index) => {
						this.gameList.push(item)
					})
					//this.gameList.push(res.data.data.list)
				})
			})

		},
		methods: {
			//分组点击事件
			async tapTab(index) { //点击tab-bar
				this.page = 1
				this.tabIndex = index;
				api_gift_list(index, this.page, this.rows).then(res => {
					this.gameList = res.data.data.list
				})
			},
			//下拉到底部触发事件
			loadMore(tabIndex) {
				uni.showToast({
					title: '数据加载中'
				});
				this.page++
				api_gift_list(tabIndex, this.page, this.rows).then(res => {
					//this.gameList = res.data.data.list
					let list = res.data.data.list
					list.forEach((item, index) => {
						this.gameList.push(item)
					})
					//this.gameList.push(res.data.data.list)
				})
			},
			bindGamePaly(e) {
				
				let member_id = service.getUsers().member_id
				api_game_paly(member_id, e.game_id).then(res => {
					let play = escape(res.data.data.url)
					uni.navigateTo({
						url: '../game/game-play?gamePlay=' + play
					})
				})
			},
			//下载游戏
			bindDownGame(game){
				let member_id = service.getUsers().member_id
				api_down_game(game.game_id, member_id).then(res => {
					uni.navigateTo({
						url: '../game/game-play?type=down&gamePlay=' + escape(game.url)
					})
				})
			},
			bindGetGift(gift){
				let member_id = service.getUsers().member_id
				api_get_gift(gift.id,member_id).then(res=>{
					if (res.data.data[0] == 'success') {
						uni.showModal({
							showCancel:false,
							title:'领取成功!',
							content:"key为"+res.data.data[1]
						})
					} else{
						uni.showModal({
							showCancel:false,
							title:'领取失败!',
							content:res.data.data[1]
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">


	.joe-game-box {
		padding: 15upx;
	}
	.joe-game-item {
		border-radius: 20upx;
		background-color: #fff;
		margin: 0 0 15upx 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;

		image {
			padding: 2.5% 2.5% 2.5vw 2.5%;
			width: 20%;
		}
		.joe-game-item-name {
			width: 60%;
			padding: 40upx 4%;
			display: -webkit-box;
			box-orient: vertical;
			-webkit-box-orient: vertical;
			font-size: 32upx;
			color: #ff570a;

			.text {
				font-size: 12upx;
				color: #666;
				margin-top: 20upx;
			}
		}

		.joe-game-item-but {
			width: 20%;
			padding: 10upx 4% 10upx 4%;
			button {
				margin: 10upx;
				width: 100upx;
				padding: 10upx 8upx;
				font-size: 24upx;
				line-height: 1.555556;
				-webkit-tap-highlight-color: transparent;
				color: #fff;
				background-color: #ff570a;
			}
		}
	}
</style>
